import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Modal, Upload, Tag, Collapse } from 'antd';
import uplodImg from "../../../icon/上传.png"

import {
  DownOutlined,
} from '@ant-design/icons';
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}

const columns = [
  {
    title: '任务编号',
    dataIndex: 'taskId',
    key: 'taskId',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '任务状态',
    dataIndex: 'state',
    key: 'state',
    align: "center",
    render: (text) => {
      return <Tag color='cyan'>{text}</Tag>
    }
  },
  {
    title: '操作人',
    dataIndex: 'operator',
    key: 'operator',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '所属地市',
    dataIndex: 'city',
    key: 'city',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '设备总数',
    dataIndex: 'deviceNum',
    key: 'deviceNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '导入成功数',
    dataIndex: 'upSucNum',
    key: 'upSucNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '导入失败数',
    dataIndex: 'upfailNum',
    key: 'upfailNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '恢复数量',
    dataIndex: 'restoreNum',
    key: 'restoreNum',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '恢复状态',
    dataIndex: 'restoreState',
    key: 'restoreState',
    align: "center",
    render: (text) => {
      return <Tag color='cyan'>{text}</Tag>
    }
  },
  {
    title: '任务创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: "center",
    width: "12%",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    width: "12%",
    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px", }} >详情</a>
        <a style={{ fontSize: "12px", }} >全量恢复</a>
      </Space>
    }
  },
];
const data = [
  {
    key: '1',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '2',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '3',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '4',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '5',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '6',
    deviceId: '103498343423 ',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '7',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '8',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '9',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
  {
    key: '10',
    taskId: 'JX32432442',
    city: "福州市",
    operator: '张三',
    state: "成功",
    deviceNum: "7",
    upSucNum: "3",
    upfailNum: "4",
    restoreNum: "0",
    restoreState: "全部恢复",
    createTime: "2023-03-29 09:59:59",
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
export default function MaintainTask(props) {
  const { Dragger } = Upload;
  const [fileList, setFileList] = useState([]);
  const [openImport, setOpenImport] = useState(false)
  const [selectionType, setSelectionType] = useState('checkbox');
  const Import = ({ open, onCreate, onCancel }) => {
    const mprops = {
      onRemove: (file) => {
        setFileList([]);
      },
      beforeUpload: (file) => {
        setFileList([file]);
        return false;
      },
      fileList,
      accept: ".xlsx"
    };
    return (
      <Modal
        title="导入检修"
        open={open}
        onCancel={onCancel}
        okText="确定"
        cancelText="取消"
        style={{ textAlign: "left", padding: "0" }}
      >
        <hr></hr>
        <div style={{ padding: "15px 15px" }}>
          <div style={{ backgroundColor: " #e5e6e6c7", height: "50px", lineHeight: "50px", padding: "0 15px", fontSize: '10px' }}>
            <span>1、下载导入模板，根据模板提示信息完善内容</span>
            <Button style={{ float: "right", top: "9px", fontSize: '10px', backgroundColor: "#1FBBA9", color: "white" }}>下载模板</Button>
          </div>
          <div style={{ backgroundColor: " #e5e6e6c7", height: "200px", lineHeight: "50px", padding: "0 15px", fontSize: '10px', margin: "15px 0 0 0" }}>
            <span>2、上传完善好的内容，只能上传xls、xlsx格式文件</span>
            <div style={{ height: "130px" }}>
              <Dragger {...props} style={{ background: "white", borderRadius: "1px" }}>
                <img src={uplodImg} alt="earth" className="sideLogo" style={{ height: "50px", width: "50px", margin: "0 5px 0 0" }} />
                <p style={{ fontSize: "12px" }}>导入文件</p>
              </Dragger>

            </div>
          </div>
        </div>

      </Modal >
    );
  };
  const items = [
    {
      key: '1',
      label: <Space style={{ fontSize: '12px' }} size={35}>
        <div>
          任务编号<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          设备标识<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          地市
          <Select
            defaultValue="福州市"
            disabled
            className='inputValue'
            options={[
              {
                value: '福州市',
                label: '福州市',
              },

            ]}
          />
        </div>
        <div>
          操作人<Input placeholder="请输入" className='inputValue' />
        </div>
      </Space>,
      children:
        <Space style={{ fontSize: "12px" }} size={35}>
          <div>
            任务编号<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            设备标识<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            发起人<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            所属地市
            <Select
              defaultValue="福州市"
              className='inputValue'
              disabled
              options={[
                {
                  value: '福州市',
                  label: '福州市',
                },
              ]}
              style={{ height: '30px', fontSize: "12px" }}
            />
          </div>
        </Space>,
    },
  ];
  const expandIcon = (e) => {
    return <DownOutlined />
  }
  return (
    <div >
      <div style={{ display: 'flex' }}>
        <Collapse items={items} bordered={false} expandIconPosition="end" expandIcon={(e) => expandIcon(e)} style={{ flex: "1 1 900px", background: "white" }} />
        <div style={{ width: "220px", padding: "12px 0 0 0", textAlign: "right" }}>
          <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }}>重置</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }} onClick={() => setOpenImport(true)}>导入检修</Button>
        </div>
      </div>


      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "5px 0 0 0", }}
        pagination={false}
        size='small'
      >
      </Table>

      <Pagination
        total={100}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        defaultCurrent={1}
        showSizeChanger={false}
        style={{ margin: "10px 0 0 0", fontSize: "12px" }}
      />

      <Import
        open={openImport}
        onCancel={() => {
          setOpenImport(false);
        }}
      />

    </div>
  )
}
